<template>
  <n-card class="v-card" :class="mydarkTheme ? 'v-opacity' : 'v-leftBox'">
    <div  v-if="!mydarkTheme">
      <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" viewBox="0 0 100 100" style="position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;z-index: 9;">
        <defs>
        </defs>
        <path fill="#F76B1C" class="out-top" d="M37-5C25.1-14.7,5.7-19.1-9.2-10-28.5,1.8-32.7,31.1-19.8,49c15.5,21.5,52.6,22,67.2,2.3C59.4,35,53.7,8.5,37-5Z"/>
        <path fill="#f15bb5" class="in-top" d="M20.6,4.1C11.6,1.5-1.9,2.5-8,11.2-16.3,23.1-8.2,45.6,7.4,50S42.1,38.9,41,24.5C40.2,14.1,29.4,6.6,20.6,4.1Z"/>
        <path fill="#00bbf9" class="out-bottom" d="M105.9,48.6c-12.4-8.2-29.3-4.8-39.4.8-23.4,12.8-37.7,51.9-19.1,74.1s63.9,15.3,76-5.6c7.6-13.3,1.8-31.1-2.3-43.8C117.6,63.3,114.7,54.3,105.9,48.6Z"/>
        <path fill="#00f5d4" class="in-bottom" d="M102,67.1c-9.6-6.1-22-3.1-29.5,2-15.4,10.7-19.6,37.5-7.6,47.8s35.9,3.9,44.5-12.5C115.5,92.6,113.9,74.6,102,67.1Z"/>
      </svg>
    </div>
    <div style="z-index: 999;position: relative;">


      <!-- <n-config-provider :theme="mydarkTheme?darkTheme:undefined"> -->
      <n-avatar class="headmy" :size="100" round src="https://img.zhangpingguo.com/apple_Article_Head/apple1706331015547/6531e0df-8feb-4dff-a958-305ca5ab331c.png" />
      <n-h2 style="margin: 0;">张苹果</n-h2>
      <n-p style="margin:0px">这个人很简单，没什么好说的。</n-p>
      <!-- 图标 -->
      <br>
      <n-space justify="center">

        <n-popover trigger="hover">
          <template #trigger>
            <n-button @click="goPath('home')" tertiary circle type="info">
              <template #icon>
                <n-icon>
                  <HomeIcon />
                </n-icon>
              </template>
            </n-button>
          </template>
          <span>首页</span>
        </n-popover>

        <n-popover  trigger="hover">
          <template #trigger>
            <n-button @click="login()" tertiary circle type="error">
              <template #icon>
                <n-icon>
                  <Person />
                </n-icon>
              </template>
            </n-button>
          </template>
          <span>登录</span>
        </n-popover>

        <n-popover  trigger="hover">
          <template #trigger>
            <n-button  @click="goPath('articleList')" tertiary circle type="error">
              <template #icon>
                <n-icon>
                  <ChatIcon />
                </n-icon>
              </template>
            </n-button>
          </template>
          <span>文章管理</span>
        </n-popover>



        <n-popover trigger="hover">
          <template #trigger>
            <n-button @click="setTheme" tertiary circle>
              <template #icon>
                <n-icon v-if="mydarkTheme">
                  <EyeOutline />
                </n-icon>
                <n-icon v-else>
                  <EyeOffOutline />
                </n-icon>
              </template>
            </n-button>
          </template>
          <span>{{ mydarkTheme ? "白天不懂" : "夜的黑" }}</span>
        </n-popover>



        <n-popover trigger="hover">
          <template #trigger>
            <n-button @click="goPath('about')" tertiary circle type="info">
              <template #icon>
                <n-icon >
                  <EllipsisHorizontalCircleSharp />
                </n-icon>

              </template>
            </n-button>
          </template>
          <span>简介</span>
        </n-popover>
        <n-popover trigger="hover">
          <template #trigger>
            <n-button @click="toggleFullscreen" tertiary circle type="primary">
              <template #icon>
                <n-icon v-if="!isFullScreenTag">
                  <Resize />
                </n-icon>
                <n-icon v-else>
                  <ExitOutline />
                </n-icon>
              </template>
            </n-button>
          </template>
          <span>{{ isFullScreenTag ? "退出全屏" : "全屏模式" }}</span>
        </n-popover>
        <!--          https://gitee.com/shcmyg/vue_naive-ui_blog-->
      </n-space>
    </div>

    <!-- 登录框 -->

    <n-modal v-model:show="showLoginModal" class="custom-card" preset="card" title="账号登录" size="huge" :bordered="false"
             :style="{ 'width': clientWidth > 1020 ? '50%' : '90%' }">
      <n-spin :show="loginShow">

        <n-space vertical>

          <n-input ref="inputName" clearable v-model:value="userFrom.userName" type="text"
                   placeholder="请输入您的账号。" />

          <n-input ref="inputPassword" clearable v-model:value="userFrom.password" type="password"
                   show-password-on="mousedown" placeholder="请输入您的密码。" :maxlength="8" />
          <n-space justify="center">
            <n-button type="info" ghost @click="submitLogin">
              <template #icon>
                <n-icon>
                  <PawOutline />
                </n-icon>
              </template>
              登录
            </n-button>
            <n-button type="error" ghost @click="showLoginModal = false">
              关闭
            </n-button>
          </n-space>

        </n-space>
      </n-spin>

    </n-modal>

  </n-card>
</template>

<script  setup lang="ts">
import { defineEmits, ref, reactive,h } from "vue"
import { EyeOutline, Person, EyeOffOutline, EllipsisHorizontalCircleSharp,CalendarClearOutline, PawOutline, HomeOutline as HomeIcon, CreateSharp as ChatIcon, DesktopSharp, LogoReddit, Resize, ColorPaletteOutline as colorIcon, ExitOutline } from '@vicons/ionicons5'
import screenfull from 'screenfull'
import {useMessage, useNotification, NButton, NAvatar, useLoadingBar} from 'naive-ui'
import { storeToRefs } from 'pinia'
import { VaeStore } from '../store'

//解构
const store = VaeStore();
const showLoginModal = ref(false)
const loginShow = ref(false)
const inputName = ref()
const inputPassword = ref()

let { mydarkTheme, clientWidth } = storeToRefs(store);
const message = useMessage()



//设置主题
const setTheme = () => {
  store.$state.mydarkTheme = !store.$state.mydarkTheme;
}

//登录

const userFrom = reactive({
  userName: '',
  password: ''
})
//登录确定
const submitLogin = () => {
  let { password, userName } = userFrom;
  if (!userName) {
    message.error('请输入您的账号！')
    inputName.value.focus();
    return
  }
  if (!password) {
    message.error('请输入您的密码！')
    inputPassword.value.focus();
    return
  }
  message.success(userFrom.userName + '登录成功！')
  // loginShow.value = true;

}
const login = () => {
  showLoginModal.value = true;
}
//调用父组件方法
const emit = defineEmits(['goPath'])

//点击事件
const goPath = (path: string) => {
  emit('goPath', path)
}

//全屏
const isFullScreenTag = ref(false);
const toggleFullscreen = () => {
  screenfull.isEnabled ? screenfull.toggle() : message.warning('您的浏览器暂不支持切换全屏。');
}
//按Esc事件
document.addEventListener('fullscreenchange', () => {
  isFullScreenTag.value = screenfull.isFullscreen ? true : false;
})
</script>

<style lang="less" scoped>
.v-card {
  display: flex;
  height: 100%;
  /*左右居中*/
  flex-direction: row;
  justify-content: center;
  /*上下居中*/
  align-items: center;
  text-align: center;
}

.v-leftBox {
  background-color: #fee440;

}

.v-opacity {
  z-index: 1;
  background-color: none;
  background-image: none;


}

.v-opacity:after {
  content: '';
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.4;
  background-image: url('https://img.zhangpingguo.com/apple_Article/apple1706331015547/1628078c-ed75-4141-86fb-09b6b1b8fa7a.jpg');
  background-size: cover;
  background-position: center;

}
.headmy :hover .myHead{
  transform:rotate(30deg);
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
.out-top {
  animation: rotate 20s linear infinite;
  transform-origin: 13px 25px;
}
.in-top {
  animation: rotate 10s linear infinite;
  transform-origin: 13px 25px;
}
.out-bottom {
  animation: rotate 25s linear infinite;
  transform-origin: 84px 93px;
}
.in-bottom {
  animation: rotate 15s linear infinite;
  transform-origin: 84px 93px;
}
</style>
